<!doctype html>
<html lang="en">

<head>
    <script src="jquery-3.4.1.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"></link>
    <title>New Task</title>

</head>

<body>
    <div class="row" style="margin-top: 40px;" id="newTask">
        <div class="col-md-6" style="margin:0 auto" style="text-align: center;">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb" style="padding-left:0;background-color: white">
                    <li class="breadcrumb-item" @click="gotoHome"><a href="#">{{"Home~首页" | lang}}</a></li>
                    <li class="breadcrumb-item active" aria-current="page" style="color: black">{{"New Task~新任务" | lang}}</li>
                </ol>
            </nav>
            <h4 style="text-align: center;">{{"New Task~新任务" | lang}}</h4>
            <div class="form-group">
                <label>{{"Please Input URL (http or https):~请输入网页网址（以http或https开头）：" | lang}}  </label>
                <textarea class="form-control" id="links" placeholder="links" style="min-height: 100px;">{{"https://www.ebay.com~https://www.jd.com" | lang}}</textarea>
            </div>
            <button type="submit" id="send" class="btn btn-primary">{{"Start Design~开始设计" | lang}}</button>
<!--            <div class="form-group" style="margin-top: 10px">-->
<!--                <label>{{"User Data Folder (If you want to load the cookie data from your local browser, please set this folder path, and then cilck the 'Start Design with cookie data from local browser' button to start design the task):~用户本地浏览器数据目录（如果需要使用本地的登录信息和cookie，请设置此目录，并点击下方“带本地数据开始设计”按钮开始设计任务）：" | lang}}</label>-->
<!--                <textarea class="form-control" id="user-data-folder" style="min-height: 50px;">{{user_data_folder}}</textarea>-->
<!--                <button type="submit" id="sendWithCookie" style="margin-top: 10px" class="btn btn-primary">{{"Start Design with cookie data from local browser~带本地数据开始设计" | lang}}</button>-->
<!--            </div>-->
        </div>
    </div>

</body>

</html>
<script src="global.js"></script>
<script>
    var app = new Vue({
        el: '#newTask',
        data: {
            backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"),
            user_data_folder: "",
        },
        methods: {
            gotoHome: function () {
                let url = "";
                if (getUrlParam("lang") == "zh") {
                    url = "taskList.html?lang=zh&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
                } else {
                    url = "taskList.html?lang=en&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
                }
                window.location.href = url;
            }
        }
    });

    ws = new WebSocket("ws://localhost:"+getUrlParam("wsport"));
    ws.onopen = function() {
        // Web Socket 已连接上，使用 send() 方法发送数据
        console.log("已连接");
        message = {
            type: 0, //消息类型，0代表链接操作
            message: {
                id: 1, //socket id
            }
        };
        this.send(JSON.stringify(message));
    };
    ws.onclose = function() {
        // 关闭 websocket
        console.log("连接已关闭...");
    };
    $("#send").click(() => {
        let msg = {
            "type": "openPage",
            "url": $("#links").val().split("\n")[0],
            "links": $("#links").val(),
        }
        message = {
            type: 3, //消息类型，传递链接
            from: 0,
            message: {
                pipe: JSON.stringify(msg), //socket id
            }
        };
        if ($("#links").val().length <= 1) {
            if(getUrlParam("lang") == "en"|| getUrlParam("lang")==""){
                alert("Please input the correct URL, start with https:// or http://");
            } else{
                alert("请输入正确的URL，以https://或http://开头");
            }
        } else {
            ws.send(JSON.stringify(message));
            message = {
                type: 1, //消息类型，传递链接
                message: {
                    id: -1,
                },
            };
            ws.send(JSON.stringify(message));
            window.location.href = $("#links").val().split("\n")[0]; //跳转链接
        }
    });

</script>